<template>

  <span style="color: #ff0000; font-weight: 700">{{ min }}分钟{{ sec }}秒</span>

</template>

<script>

import {defineComponent, ref, watch,reactive,nextTick } from "vue";

export default defineComponent({
  name: 'ExamTimer',
  props: {
    value: {
      type: Number,
    }
  },
  setup(props, context) {
    let leftSeconds = ref(0);
    let min = ref('00');
    let sec = ref('00');


    //计时
    const countdown = function () {
      // 倒计时结束了
      if (leftSeconds.value < 0) {
        // this.$emit('timeout')
        return
      }
      // 时
      const mins = parseInt(leftSeconds.value / 60)
      const secs = parseInt(leftSeconds.value % 60)

      min.value = mins > 9 ? mins : '0' + mins
      sec.value = secs > 9 ? secs : '0' + secs
      leftSeconds.value = leftSeconds.value-1

      setTimeout(function() {
        countdown()
      }, 1000)
    }
    const createMouth = function () {
      leftSeconds.value = props.value
      countdown()
    }
    createMouth()
    return {
      leftSeconds,
      min,
      sec,
      countdown,
    }
  }

})
</script>

